import {Button, Calendar, Card, Form, Input, List, message, Popconfirm, Tabs, Tag, theme} from "antd";
import React, {useState, useRef} from 'react';
import moment from "moment";
import 'moment/locale/zh-cn';
import locale from "antd/lib/date-picker/locale/zh_CN.js";
import {CheckOutlined, CloseOutlined} from "@ant-design/icons";
import {setThingList, setNon_thingList} from "@/store/Modules/abeyanceStore.js";
import {useDispatch, useSelector} from "react-redux";

moment.locale('zh-cn');
const FirstHome = () => {
    // 注册redux
    const dispatch = useDispatch()
    // 日历组件
    const onPanelChange = (value, mode) => {
        console.log(value.format('YYYY-MM-DD'), mode);
    };
    const {token} = theme.useToken();
    const wrapperStyle = {
        width: 300,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
    };
    // 待办列表数据
    const [thingList, setThingList] = useState([])
    // 点击添加按钮
    const formRef = useRef();
    const onFinish = async (values) => {
        // await dispatch(setThingList(values))
        // setThingList(useSelector(state => state.abeyance.thingList))
        await setThingList([...thingList, values])
        message.success(`添加成功`);
        formRef.current.resetFields();
    };
    // 获取已办事项列表数据
    const [non_thingList, setNon_thingList] = useState([])
    // 点击完成按钮
    const onAdd = (item) => {
        const items = {...item, time: moment(Date.now()).format('YYYY-MM-DD')}
        setNon_thingList([...non_thingList, items])
        // 删除待办事项列表数据
        setThingList(thingList.filter(item => item.description !== item.description))
        message.success(`已完成`);
    }
    // 点击删除按钮
    const onDelete = (item) => {
        setThingList(thingList.filter(item => item.description !== item.description))
        message.success(`删除成功`);
    }


    // 标签页组件
    const items = [
        {
            key: '1',
            label: '待办',
            icon: <CloseOutlined/>,
            children: <List
                style={{maxHeight: 300, overflowY: 'auto'}}
                size="small"
                bordered
                dataSource={thingList}
                renderItem={(item) => <List.Item>
                    <div style={{width: "100%", display: 'flex', justifyContent: 'space-between'}}>
                        <p>{item?.description}</p>
                        <p>
                            <div style={{width: 150, display: 'flex', justifyContent: 'space-between'}}>
                                <Popconfirm
                                    title="已完成"
                                    onConfirm={() => onAdd(item)}
                                    description="你确定这条事项已完成吗？"
                                    okText="确定"
                                    cancelText="取消"
                                >
                                    <Button type={'primary'}>完成</Button>
                                </Popconfirm>
                                <Popconfirm
                                    title="删除"
                                    onConfirm={() => onDelete(item)}
                                    description="你确定删除这条事项吗？"
                                    okText="确定"
                                    cancelText="取消"
                                >
                                    <Button type={'primary'} danger>删除</Button>
                                </Popconfirm>
                            </div>
                        </p>
                    </div>
                </List.Item>}
            />
        },
        {
            key: '2',
            label: '已办',
            icon: <CheckOutlined/>,
            children: <List
                size="small"
                style={{maxHeight: 300, overflowY: 'auto'}}
                bordered
                dataSource={non_thingList}
                renderItem={(item) => <List.Item>
                    <p>{item?.description}</p>
                    <div style={{width: 150, display: 'flex', justifyContent: 'space-between'}}>
                        <Tag color="blue">{item?.time}</Tag>
                        <Tag color="green">已完成</Tag>
                    </div>
                </List.Item>}
            />
        }
    ]

    return (
        <div style={{display: 'flex'}}>
            <Card
                title={'待办事项'}
                style={{width: '50%', height: 620}}>
                <div style={{height: 140}}>
                    <Form
                        style={{
                            maxWidth: 600,
                        }}
                        ref={formRef}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="添加事项"
                            name="description"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入待办事项',
                                },
                            ]}
                        >
                            <Input.TextArea placeholder="请输入待办事项" autoSize={{minRows: 3, maxRows: 3}}/>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 20,
                                span: 16,
                            }}>
                            <Button type="primary" htmlType="submit" style={{width: 100}}>
                                添 加
                            </Button>
                        </Form.Item>
                    </Form>
                </div>

                <Tabs
                    defaultActiveKey="1"
                    items={items}
                    animated={true}
                />
            </Card>
            <Card
                title={'我的日程'}
                style={{width: '50%', height: 620, marginLeft: '5px', overflowY: 'auto'}}>
                <div style={wrapperStyle}>
                    <Calendar fullscreen={false} onPanelChange={onPanelChange}
                              style={{width: 600, height: "auto"}}
                              locale={locale}
                    />
                </div>
            </Card>

        </div>
    )
}

export default FirstHome